<template>
  <div>
    <button @click="isShow=!isShow">显示/隐藏</button>
    <transition-group name="hello" appear>
       <h1 v-show="isShow" >你好</h1>
        <h1 v-show="isShow" >你好mmmm</h1>
   </transition-group>
  </div>
  
</template>

<script>

export default {
  name: "",
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

<style scoped>
h1 {
  background-color: orange;
  transition: 0.5s linear;
}
.hello-enter {
  transform: translate(-100px);
}
.hello-enter-to {
  transform: translate(0px);
}
.hello-leave {
  transform: translate(0px);
}
.hello-leave-to {
  transform: translate(-100px);
}
</style>